<template>
    <div>
        <el-menu
                style="width: 200px; min-height: calc(100vh - 50px)"
                :default-active="path"
                router
                class="el-menu-vertical-demo">
            <el-sub-menu index="1" v-if="role === 1">
                <template #title>
                    <span>系统管理</span>
                </template>
                <el-menu-item index="/user">用户管理</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="2">
                <template #title>
                    <span>数据管理</span>
                </template>
                <el-menu-item index="/book">书籍管理</el-menu-item>
                <el-menu-item index="/news">新闻管理</el-menu-item>
            </el-sub-menu>
        </el-menu>
    </div>
</template>

<script>
    import cookie from "@/utils/cookie";
    import api from "@/api";

    export default {
        name: "Aside",
        data() {
            return {
                path: this.$route.path,
                role: 2,
                user: {}
            }
        },
        created() {
            // 取出cookie里面的用户信息再次判断role（用户角色）不被恶意修改
            let userJson = cookie.getCookie("user")
            let userObj = JSON.parse(userJson)
            this.user.username = userObj.data.username
            this.user.password = userObj.data.password

            // 重新向后台获取user对象
            api.login(this.user).then(res => {
                this.role = res.data.data.role
                // 防止 普通用户 直接通过/user路由到用户管理
                if (this.role !== 1) {
                    this.path = "/book"
                }
            })
        }
    }

</script>

<style scoped>

</style>